<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manager</title>
    <script type="text/javascript" src="js/util.js"></script>
    <script src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/loading.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #user-name {
            display: block;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
            padding-right: 20px;
            float: right;
            color: #00b38a;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
        }

        #user-name:hover {
            background: rgba(0, 0, 0, .3)
        }

        #nav {
            height: 100%;
            float: left;
            width: 10%;
        }

        #nav li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }

        #nav li:nth-child(3) {
            color: white;
            background: #00b38a;
        }

        #nav li:hover {
            color: white;
            background: #00b38a;
        }

        #content {
            width: 90%;
            float: left;
        }

        /**
        private
         */
        table {
            width: 80%;
            margin: 20px auto;
            border-right: 1px #777777 solid;
            border-bottom: 1px #777777 solid;
            border-collapse: collapse;
            table-layout: fixed
        }

        th {
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            border-left: 1px #777777 solid;
            border-top: 1px #777777 solid;
            overflow: hidden;
        }

        .user-item th:nth-child(8) {
            color: rebeccapurple;
        }

        .user-item th:nth-child(8):hover {
            color: white;
            background: rebeccapurple;
        }

        .user-item th:nth-child(9) {
            color: red;
        }

        .user-item th:nth-child(9):hover {
            color: white;
            background: red;
        }

        #footer{
            width: 60%;
            margin: 20px auto;
        }

        .page-button {
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            font-weight: normal;
            margin-left: 10px;
            color: #00b38a;
            border: 1px solid #00b38a;
            border-radius: 4px;
        }

        .page-button:hover {
            color: white;
            background: #00b38a;
        }

        .add-button {
            float: right;
            margin-right: 15%;
            width: 120px;
            height: 40px;
            text-decoration: none;
            line-height: 40px;
            text-align: center;
            font-weight: normal;
            margin-left: 10px;
            color: deeppink;
            border: 1px solid deeppink;
            border-radius: 4px;
        }

        .add-button:hover {
            color: white;
            background: deeppink;
        }

        .clear_float:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        #footer {
            width: 60%;
            margin: 20px auto;
        }

        .page-button {
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            font-weight: normal;
            margin-left: 10px;
            color: #00b38a;
            border: 1px solid #00b38a;
            border-radius: 4px;
        }

        .page-button:hover {
            color: white;
            background: #00b38a;
        }

        .add-button {
            float: right;
            margin-right: 15%;
            width: 120px;
            height: 40px;
            text-decoration: none;
            line-height: 40px;
            text-align: center;
            font-weight: normal;
            margin-left: 10px;
            color: deeppink;
            border: 1px solid deeppink;
            border-radius: 4px;
        }

        .add-button:hover {
            color: white;
            background: deeppink;
        }

        .clear_float:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

    </style>
</head>
<body>
<!--左侧导航栏-->
<ul id="nav">
    <li onclick="navClick(1)">用户管理</li>
    <li onclick="navClick(2)">公司管理</li>
    <li>工作列表</li>
</ul>
<!--content-->
<div id="content">
    <!--状态栏-->
    <div style="height: 50px">
        <h4 href="#" id="user-name">管理员</h4>
    </div>
    <h1 style="text-align: center">工作列表</h1>
    <table id="user-table">
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>公司</th>
            <th>工作种类</th>
            <th>公司链接</th>
            <th>福利待遇</th>
            <th>发布时间</th>
            <th style="color: rebeccapurple">修改</th>
            <th style="color: red">删除</th>
        </tr>
    </table>

    <!--页码导航-->
    <a class="add-button" href="addJob.html">添加</a>
    <div class="clear_float"></div>
    <div id="footer">
        <h4 id="page-index" style="float: left;color: #11a984;line-height: 40px;text-align: center"></h4>
        <h4 class="page-button" onclick="setPage(0)">首页</h4>
        <h4 class="page-button" onclick="setPage(1)">上一页</h4>
        <h4 class="page-button" onclick="setPage(2)">下一页</h4>
        <h4 class="page-button" onclick="setPage(3)">尾页</h4>
    </div>
</div>

<div id="loading"
     style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 5;display: none">
    <section class="main">
        <!-- the component-->
        <ul class="bokeh">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</div>
<script>
    $(document).ready(function () {
        loading(false);
        setTimeout("setPage(0)", 1000)
    });
    var page = 0;
    var total;

    function setPage(state) {
        switch (state) {
            case 0:
                page = 1;
                break;
            case 1:
                if (page > 1) {
                    page--;
                }
                break;
            case 2:
                if (page < total) {
                    page++;
                }
                break;
            case 3:
                page = total;
                break;
        }
        getList(page);
    }

    /**
     * 获取工作列表
     */
    function getList(arg0) {
        $.ajax({
            type: "POST",
            url: "/home",
            data: JSON.stringify(createJson(arg0)),
            contentType: "application/json;charset:utf-8",
            dataType: "json",
            success: function (data) {
                loading(true);
                if (data.code == 0) {
                    total = data.total;
                    createJobElement(data.data);
                } else {
                    alert(data.message);
                }
            }, error: function (message) {
                loading(true);
                alert(message);
            }
        })
    }

    function createJson(page) {
        var json = {
            "param": "jobList",
            "page": page
        };
        return json;
    }

    /**
     * 构建用户列表HTML
     */
    function createJobElement(list) {
        $("#page-index").text("第" + page + "页/共" + total + "页");
        if (page == total) {
            $("#footer").find("h4:nth-child(4)").hide(500);
        } else {
            $("#footer").find("h4:nth-child(4)").show(500);
        }

        if (page == 1) {
            $("#footer").find("h4:nth-child(3)").hide(500);
        } else {
            $("#footer").find("h4:nth-child(3)").show(500);
        }

        $("#user-table").empty();

        $(list).each(function (index, job) {
            var item = "<tr class='user-item'>" +
                "<th>"
                + job.jobNo
                + "</th>" +
                "<th>"
                + job.jTitle
                + "</th>" +
                "<th>"
                + job.jCompany
                + "</th>" +
                "<th>"
                + job.jIndustry
                + "</th>" +
                "<th><a href='" + job.jLink + "'>"
                + "网址</a></th>" +
                "<th>"
                + job.jWages
                + "</th>" +
                "<th>"
                + fomatDate(job.jCreateTime)
                + "</th>" +
                "<th>修改</th><th>删除</th>"
            "</tr>";
            $(item).appendTo("#user-table");
        })
    }

    /**
     * 导航点击事件
     */
    function navClick(index) {
        switch (index) {
            case 1:
                window.location = "userManager.html";
                break
            case 2:
                window.location = "companyManager.html";
                break
        }
    }

    /**
     * 隐藏显示加载框
     */
    function loading(hide) {
        if (hide) {
            $("#loading").css("display", "none");
        } else {
            $("#loading").css("display", "block");
        }
    }
</script>
</body>
</html>